<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box pagination">
    <div class="app-container">
      <!--  class="search-card-box" 加上这个就没有内边距了-->
      <!--  shadow="always" 会显示阴影 -->
      <el-card shadow="always">
        <el-button type="primary" class="primary" @click="Addcarriages">新增模版</el-button>
        <el-table
          :data="tableData" stripe style="width: 100%"
          :row-style="{ height: '48px' }"
          :cell-style="{ padding: '0' }">
          <el-table-column prop="templateType" label="模版类型" width="150" height="12px">
            <template slot-scope="scope">
              <span v-if="scope.row.templateType === 1">同城寄</span>
              <span v-if="scope.row.templateType === 2">省内寄</span>
              <span v-if="scope.row.templateType === 3">经济区互寄</span>
              <span v-if="scope.row.templateType === 4">跨省</span>
            </template>
          </el-table-column>

          <el-table-column label="运送类型" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.transportType === 1 ? '普快' : '特快' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="associatedCityList" label="关联城市" width="150">
            <template slot-scope="scope">
              {{ convertArray(scope.row.associatedCityList) }}
            </template>
          </el-table-column>
          <el-table-column prop="firstWeight" label="首重" width="180" />
          <el-table-column prop="continuousWeight" label="续费" width="180" />
          <el-table-column prop="lightThrowingCoefficient" label="轻抛系统" width="180" />
          <!-- 操作列  align="center"表头居中 -->
          <el-table-column label="操作" class="caozuo" align="center">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="handleEditLine(scope.row.id)">编辑</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link type="primary" :underline="false" style="color: red" @click="handleDeleteLine(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 弹出框 -->
      <el-dialog :title="`${showText}模版`" :visible.sync="dialogVisible" width="600px">
        <!-- 表单 -->
        <el-form ref="perForm" :model="ruleForm" :rules="rules" label-width="120px">
          <el-form-item label="模版类型" prop="templateValue">
            <el-select v-model="ruleForm.templateValue" placeholder="请选择模版类型" style="width: 90%">
              <el-option v-for="item in templateType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="运送类型" prop="transportValue">
            <el-select v-model="ruleForm.transportValue" placeholder="请选择活动区域" style="width: 90%">
              <el-option v-for="item in transportType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="关联城市" prop="associatedCityList">
            <el-checkbox-group v-if="ruleForm.templateValue === 3" v-model="ruleForm.associatedCityList">
              <el-checkbox label="京津冀" name="type" />
              <el-checkbox label="江浙沪" name="type" />
              <el-checkbox label="川渝" name="type" />
              <el-checkbox label="黑吉辽" name="type" />
            </el-checkbox-group>
            <span v-else> {{ ruleForm.associatedCityList }}</span>
          </el-form-item>
          <el-form-item label="首重价格" prop="theFirstHeavyPrice">
            <el-input v-model="ruleForm.theFirstHeavyPrice" placeholder="请选择首重价格" style="width: 90%" />
          </el-form-item>
          <el-form-item label="续重价格" prop="continuedHeavyPrice">
            <el-input v-model="ruleForm.continuedHeavyPrice" placeholder="请选择续重价格" style="width: 90%" />
          </el-form-item>
          <el-form-item label="轻抛系数" prop="castLightCoefficient">
            <el-input v-model="ruleForm.lightThrowingCoefficient" placeholder="请选择轻抛系数" style="width: 90%" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel()">取 消</el-button>
          <el-button type="primary" @click="btnOK()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { carriages, AddandEditcarriages } from '@/api/yuanfei'
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      templateType: [
        { label: '同城寄', value: 1 },
        { label: '省内寄', value: 2 },
        { label: '经济区互寄', value: 3 },
        { label: '跨省', value: 4 }
      ],
      transportType: [
        { label: '普快', value: 1 },
        { label: '特快', value: 2 }
      ],
      ruleForm: {
        id: '',
        templateValue: '', // 模版类型的值
        transportValue: '', // 运送类型的值
        associatedCityList: '全国', // 关联城市
        theFirstHeavyPrice: '', // 首重价格的值
        continuedHeavyPrice: '', // 续重价格的值
        lightThrowingCoefficient: '' // 轻抛系数的值-----就是接口运费模板id
      },
      rules: {
        templateValue: [{ required: true, message: '请选择模版类型', trigger: 'change' }],
        transportValue: [{ required: true, message: '请选择运送类型', trigger: 'change' }],
        associatedCityList: [{ required: true, message: '请选择关联城市', trigger: 'change' }],
        theFirstHeavyPrice: [
          { required: true, message: '请输入首重价格', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        continuedHeavyPrice: [
          { required: true, message: '请输入续重价格', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '请输入轻抛系数', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showText() {
      return this.ruleForm.id ? '编辑' : '新增'
    }
  },
  watch: {
    // 监听选择的模版是不是
    'ruleForm.templateValue': {
      handler(newValue) {
        if (newValue === 3) {
          if (!(this.ruleForm.associatedCityList instanceof Array)) {
            this.ruleForm.associatedCityList = []
          }
        } else {
          this.ruleForm.associatedCityList = '全国'
        }
      }
    },
    deep: true
  },
  async created() {
    await this.initData()
  },
  methods: {
    async initData() {
      const res = await carriages()
      console.log('[ res ]', res)
      this.tableData = res.data
    },
    // 新增按钮
    async Addcarriages() {
      this.dialogVisible = true
    },
    // 编辑按钮
    async handleEditLine(id) {
      const Edit = this.tableData.find((item) => item.id === id)
      console.log('[ Edit ]', Edit)
      this.ruleForm.id = id
      this.ruleForm.templateValue = Edit.templateType // 模版类型的值
      this.ruleForm.transportValue = Edit.transportType // 运送类型的值
      this.ruleForm.associatedCityList = Edit.associatedCityList // 关联城市
      this.ruleForm.theFirstHeavyPrice = Edit.firstWeight // 首重价格的值
      this.ruleForm.continuedHeavyPrice = Edit.continuousWeight // 续重价格的值
      this.ruleForm.lightThrowingCoefficient = Edit.lightThrowingCoefficient // 轻抛系数的值-----就是接口运费模板id

      console.log('[this.ruleForm  ]', this.ruleForm)
      this.dialogVisible = true
    },
    // 表格关联城市的渲染方法
    convertArray(array) {
      const cityMap = {
        1: '全国',
        2: '京津冀',
        3: '江浙沪',
        4: '川渝',
        5: '黑吉辽'
      }
      let result = []
      result = array.map((item) => cityMap[item] || item)
      return result.join(',')
    },
    // 确定按钮
    btnOK() {
      this.$refs.perForm
        .validate()
        .then(async () => {
          const formData = {
            id: this.ruleForm.id,
            associatedCityList: this.ruleForm.associatedCityList, // 关联城市
            continuousWeight: parseInt(this.ruleForm.continuedHeavyPrice), // 续重价格的值
            firstWeight: parseInt(this.ruleForm.theFirstHeavyPrice), // 首重价格的值
            lightThrowingCoefficient: parseInt(this.ruleForm.lightThrowingCoefficient), // 运费模板id
            templateType: this.ruleForm.templateValue, // 模板类型
            transportType: this.ruleForm.transportValue // 运送类型
          }
          // 编辑下的确定按钮
          if (this.ruleForm.id) {
            const res = await AddandEditcarriages(formData)
            console.log('[ 编辑 ]', res)
          } else {
            // 新增下的确定按钮
            const res = await AddandEditcarriages(formData)
            console.log('[ 新增 ]', res)
          }
        })
        .then(() => {
          //  提示消息
          this.$message.success('操作成功')
          this.initData()
          this.btnCancel()
        })
    },
    // 取消按钮
    btnCancel() {
      this.ruleForm = {
        id: '',
        templateValue: '', // 模版类型的值
        transportValue: '', // 运送类型的值
        associatedCityList: '全国', // 关联城市
        theFirstHeavyPrice: '', // 首重价格的值
        continuedHeavyPrice: '', // 续重价格的值
        castLightCoefficient: '' // 轻抛系数的值
      }
      this.$refs.perForm.resetFields()
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 10px;
    }
  }
}
.primary {
  margin-bottom: 20px;
}
.caozuo {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
